﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/core/inject.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>  
    <script src="../../lib/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerListBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        { 
            $("#listbox1,#listbox2").ligerListBox({
                isShowCheckBox: true,
                isMultiSelect: true,
                height: 140
            });

            var data = [
                    { text: '张三', id: '1' },
                    { text: '李四', id: '2' },
                    { text: '赵武2', id: '3' },
                    { text: '赵武3', id: '4' },
                    { text: '赵武4', id: '5' },
                    { text: '赵武5', id: '6' },
                    { text: '赵武6', id: '7' },
                    { text: '赵武7', id: '8' }
            ];
            liger.get("listbox1").setData(data);
        });
        function moveToLeft()
        {
            var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
            var selecteds = box2.getSelectedItems();
            if (!selecteds || !selecteds.length) return;
            box2.removeItems(selecteds);
            box1.addItems(selecteds);
        }
        function moveToRight()
        {
            var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
            var selecteds = box1.getSelectedItems();
            if (!selecteds || !selecteds.length) return;
            box1.removeItems(selecteds);
            box2.addItems(selecteds);
        }
        function moveAllToLeft()
        { 
            var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
            var selecteds = box2.data;
            if (!selecteds || !selecteds.length) return;
            box1.addItems(selecteds);
            box2.removeItems(selecteds); 
        }
        function moveAllToRight()
        { 
            var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
            var selecteds = box1.data;
            if (!selecteds || !selecteds.length) return;
            box2.addItems(selecteds);
            box1.removeItems(selecteds);
           
        }
    </script>
    <style type="text/css">
        .middle input {
            display: block;width:30px; margin:2px;
        }
    </style>
</head>
<body style="padding:10px"> 
     <div style="margin:4px;float:left;">
         <div id="listbox1"></div>  
     </div>
     <div style="margin:4px;float:left;" class="middle">
         <input type="button" onclick="moveToLeft()" value="<" />
          <input type="button" onclick="moveToRight()" value=">" />
          <input type="button" onclick="moveAllToLeft()" value="<<" />
         <input type="button" onclick="moveAllToRight()" value=">>" />
     </div>
    <div style="margin:4px;float:left;">
        <div id="listbox2"></div> 
    </div>
</body>
</html>
